<template>
	<view class="main">
		<!-- topBar -->
		<lawBankTopBar :title="title" :backgroundUrl="backgroundUrl"></lawBankTopBar>
		<view class="content1">
			<view class="content_top1" v-if="!this.isSearch">
				<!-- 搜索 -->
				<view class="search">
					<u-search placeholder="输入您想了解的内容" :showAction="false" bgColor="#fff" borderColor="#C4C4C4" height="70rpx"
						@blur="search" v-model="keyword" :clearabled="false"></u-search>
				</view>
				<view class="highSearch flex_col" @click="goHighSearch(2)">
					<text>高级</text>
					<text>搜索</text>
				</view>
			</view>
			<view class="tabs" v-if="!this.form.keyword">
				<view :class="['tab', chooseTabId == item.id ? 'activeTab' : '']" v-for="(item, index) in tabsList" :key="item.id"
					@click="chooseTab(item, index)">{{ item.name }}</view>
			</view>

			<view class="screen" v-if="!this.form.keyword">
				<view class="screen_item">
					<biaofun-region-two-level @change1="changeRegion" @changes1="changeRegions1">
						<view class="ft_item flex_align">
							<view class="flex_align">
								<view class="img">
									<image src="../../static/img/lawBank/icon_2.png" mode="scaleToFill" class="img100"></image>
								</view>
								<view class="ft ellipsis1" v-if="regionName.length > 0">
									{{ regionName[1].name }}
								</view>
								<span v-else class="fz26">地区</span>
							</view>
							<image class="icon" src="../../static/img/lawBank/icon_3.png" mode="aspectFit"></image>
						</view>
					</biaofun-region-two-level>
				</view>
				<view class="screen_item" v-if="chooseTabId == 1">
					<picker :range="taxTypeList" range-key="name" @change="taxTypeChange" @cancel="taxTypeCancel">
						<view class="ft_item flex_align">
							<view class="flex_align">
								<view class="img">
									<image src="../../static/img/lawBank/icon_0.png" mode="aspectFill" class="img100"></image>
								</view>
								<view class="ft ellipsis1" v-if="indexType >= 0">
									{{ taxTypeList[indexType].name }}
								</view>
								<span v-else class="fz26">税种</span>
							</view>
							<image class="icon" src="../../static/img/lawBank/icon_3.png" mode="aspectFit"></image>
						</view>
					</picker>
				</view>
				<view class="screen_item justify_center">
					<picker :range="potencyList" range-key="id" @change="potencyChange" @cancel="potencyCancel">
						<view class="ft_item flex_align ">
							<view class="flex_align">
								<view class="img">
									<image src="../../static/img/lawBank/icon_1.png" mode="" class="img100"></image>
								</view>
								<view class="ft ellipsis1" v-if="potencyIndex >= 0">
									{{ potencyList[potencyIndex].id }}
								</view>
								<span v-else class="fz26">效力注释</span>
							</view>
							<image class="icon" src="../../static/img/lawBank/icon_3.png" mode="aspectFit"></image>
						</view>
					</picker>
				</view>
			</view>
			<view class="result" v-if="this.form.keyword || this.isSearch">为你找到 <text style="color: #FF0000">{{ count }}</text>
				个结果</view>


			<scroll-view id="content_list" class="content_list"
				:style="{ height: `calc(100vh - ${this.isSearch1 ? 520 : (isSearch ? 480 : 580)}rpx` }" :scroll-y="true"
				:scroll-top="scrollTop" refresher-enabled="true" :refresher-triggered="isRefreshing" @refresherrefresh="reload"
				@scrolltolower="loadMore">
				<view class="content_item" v-for="(item, index) in lawList" :key="index" @click="toInfo(item.id)">
					<view class="item_top">
						<view class="item_dot" v-if="isShowImg">
							<image src="../../static/img/lawBank/icon_new.png" mode="scaleToFill" class="img_icon">
							</image>
						</view>
						<view class="item_title ellipsis2" v-html="hightLightText(item.title, form.keyword)"></view>
					</view>
					<view class="item_bottom">
						<view class="item_dot"></view>
						<view class="item_info">
							<view class="potency">效力注释：{{ item.active_info }}</view>
							<view class="time">发文日期：{{ item.push_date }}</view>
						</view>
					</view>
				</view>
				<uni-load-more :status="loadMoreStatus"></uni-load-more>
			</scroll-view>
		</view>


		<view v-show="showPopup">
			<u-modal :show="showPopup" :showCancelButton="true" title="温馨提示" width="580rpx" @confirm="goPlatform()"
				@cancel="showPopup = false" confirmText="加入会员" :content="tipsMsg"></u-modal>
		</view>
	</view>
</template>

<script type="text/javascript" src="plus-confusion://../lawBank/favorable/index"></script>

<style lang="scss">
.main {
	background: #fff;

	.content1 {
		width: 100%;
		height: 500rpx;
		position: relative;
		z-index: 10;
		margin-top: -32rpx;
		background: #fff;
		border-radius: 40rpx;
		padding: 30rpx;
		box-sizing: border-box;

		.content_top1 {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.search {
				width: 600rpx !important;
			}

			.highSearch {
				font-size: 24rpx;
				font-weight: 600;
				color: #1C87F3;
				line-height: 28rpx;
			}
		}

		.tabs {
			display: flex;
			margin: 0 auto;
			margin-top: 19px;
			height: 78rpx;
			background: #ffffff;
			border: 1px solid #1c87f3;

			.tab {
				width: 379px;
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #1c87f3;

				&.activeTab {
					background: #1c87f3;
					color: #fff !important;
				}
			}

		}

		.screen {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 32rpx;

			.screen_item {
				flex: 1;
				position: relative;
				height: 36px;
				background: #ffffff;
				border-radius: 5px;
				color: #94a2b7;
			}

			.ft_item {
				position: relative;
				padding: 0 30rpx;
				width: 220rpx;
				height: 67rpx;
				background: #ffffff;
				border-radius: 10rpx;
				color: #94a2b7;

				.ft {
					font-size: 26rpx;
					// width: 120rpx;
				}

				.img100 {
					width: 32rpx;
					height: 32rpx;
				}

				.icon {
					position: absolute;
					top: 25rpx;
					right: 20rpx;
					width: 20rpx;
					height: 20rpx;
				}

			}
		}

		.result {
			margin: 40rpx 0 50rpx 0;
		}

		.content_list {
			margin-top: 40rpx;

			.content_item {
				margin-bottom: 60rpx;

				.item_top,
				.item_bottom {
					display: flex;

					.item_dot {
						margin-right: 10rpx;
						width: 32rpx;
						height: 32rpx;

						.img_icon {
							width: 100%;
							height: 100%;
						}
					}

					.item_title {
						width: calc(100% - 42rpx);
						font-size: 34rpx;
						color: #3D3D3D;
						line-height: 40rpx;
					}

				}

				.item_bottom {
					margin-top: 24rpx;

					.item_dot {
						visibility: hidden;
					}

					.item_info {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 24rpx;
						color: #BCBCBC;
						line-height: 28rpx;
					}
				}
			}
		}
	}
}

.fz26 {
	font-size: 26rpx !important
}

/deep/.picker {
	display: flex;
	justify-content: center;
}
</style>